<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    姓:<input type="text" v-model="firstName"><br>
    名:<input type="text" v-model="lastName"><br>
    全名:<span>{{fullName}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
        Vue.config.productionTip=false//阻止vue启动时产生提示
       const vm=new Vue({
             el: "#root",
             data:{
                  firstName:'张',
                  lastName:'三',

                },
            computed:{
                 //完整形式
                 /*fullName: {
                     //get有什么作用，当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                     //get什么时候被调用，1.初次读取fullName时。2.所依赖的数据发生变化时
                     get(){
                         console.log('get被调用')
                         console.log(this)
                         return this.firstName+"-"+this.lastName
                     },
                     //set什么时候被调用，当fullName被修改时
                     set(value){
                         console.log("set",value)
                         const arr=value.split("-")
                         this.firstName=arr[0]
                         this.lastName=arr[1]
                         return this.firstName+"-"+this.lastName
                     }
                 }*/
                //简写形式
                fullName(){
                    return this.firstName+this.lastName;
                }
            }
         })
</script>
</body>
</html>